<template>
  <div class="footer">
    <div class="footer-nav">
      <ul>
        <li><router-link :to="{path: '/'}">首页</router-link></li>
        <li><router-link :to="{path: '/crossRegionCheck'}">在线核验办证</router-link></li>
        <li><router-link :to="{path: '/notarizaCheck'}">电子公证书</router-link></li>
        <li><router-link :to="{path: '/checkIn'}">入驻平台</router-link></li>
      </ul>
    </div>
    <div class="footer-info">
      <span><i class="iconfont icon-zixundianhua"></i>咨询电话：15611778742</span>
      <span><i class="iconfont icon-fuwushijian"></i>服务时间：9：00-19：00</span>
      <span><i class="iconfont icon-zixunyouxiang"></i>咨询邮箱：18672491131@163.com</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

/**
 * 底部组件封装
 * @Author yuanyexu
 * @Date 2021-08-03
 */
export default defineComponent({
  name: 'Footer',
  props: {
    /**
     * 头像尺寸
     * @type {number|string}
     */
    size: {
      type: [Number, String],
      default: 'large',
    },
  },
});
</script>
<style lang="scss" scoped>
.footer {
  height: 176px;
  background: #313131;
  &-nav {
    height: 116px;
    border-bottom: #7c7c7c solid 1px;
    ul {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        a {
          font-size: 18px;
          line-height: 116px;
          color: #d6d6d6;
        }
      }
    }
  }
  &-info {
    width: 900px;
    color: #fff;
    height: 59px;
    line-height: 59px;
    margin: 0 auto;
    text-align: center;
    span {
      margin-right: 130px;
    }
    :last-child {
      margin-right: 0 !important;
    }
    .iconfont {
      font-size: 16px;
      margin-right: 5px!important;
    }
  }
}
</style>
